<template>
  <div class="choice-doctor">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      :title="departmentName"
      left-arrow
      @click-left="goBack"
    />

    <!-- 日期选择 -->
    <div class="date-selector">
      <div
        v-for="day in weekDays"
        :key="day.value"
        class="date-item"
        :class="{ active: selectedDay === day.value }"
        @click="selectDay(day.value)"
      >
        <span class="day-label">{{ day.label }}</span>
        <!-- <span class="date-number">{{ day.date }}</span> -->
      </div>
    </div>

    <!-- 班次选择 -->
    <div class="shift-selector">
      <div
        class="shift-item"
        :class="{ active: selectedShift === 'morning' }"
        @click="selectShift('morning')"
      >
        上午
      </div>
      <div
        class="shift-item"
        :class="{ active: selectedShift === 'afternoon' }"
        @click="selectShift('afternoon')"
      >
        下午
      </div>
    </div>

    <!-- 坐诊医生列表 -->
    <div class="doctor-list">
      <div v-for="doctor in doctors" :key="doctor.id" class="doctor-card">
        <div class="doctor-avatar">
          <img :src="doctor.avatar || '/default-avatar.png'" alt="医生头像">
        </div>
        <div class="doctor-info">
          <div class="doctor-name">{{ doctor.name }}
            <span class="doctor-title">{{ doctor.title }}</span>
          </div>
          <div class="doctor-tags">
            <span v-for="tag in doctor.tags" :key="tag" class="tag">{{ tag }}</span>
          </div>
          <div class="doctor-intro">{{ doctor.introduction }}</div>
        </div>
        <div class="doctor-action">
            <span class="price">¥{{ doctor.fee }}</span>
            <div class="appointment-info">
              <span class="appointment-count">剩余号源: {{ doctor.available_appointments }}</span>
            </div>
            <van-button 
              type="primary" 
              size="small" 
              :disabled="doctor.available_appointments <= 0"
              @click="makeAppointment(doctor)"
            >
              {{ doctor.available_appointments > 0 ? '预约挂号' : '已约满' }}
            </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const departmentId = route.query.departmentId
const departmentName = ref(route.query.departmentName || '选择医生')

const selectedDay = ref(new Date().getDay() || 7) // 默认选中今天，周日时getDay()返回0，转换为7
const selectedShift = ref('morning') // 默认选择上午班
const doctors = ref([])

// 生成一周的日期数据
const weekDays = computed(() => {
  const days = []
  const today = new Date()
  const dayOfWeek = today.getDay() || 7 // 转换周日的0为7
  
  // 计算本周的起始日期
  const startDate = new Date(today)
  startDate.setDate(today.getDate() - dayOfWeek + 1) // 从周一开始
  
  for (let i = 0; i < 7; i++) {
    const currentDate = new Date(startDate)
    currentDate.setDate(startDate.getDate() + i)
    days.push({
      label: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'][i],
      value: i + 1,
      date: currentDate.getDate()
    })
  }
  return days
})

// 返回上一页
const goBack = () => {
  router.back()
}

// 选择日期
const selectDay = async (day) => {
  selectedDay.value = day
  await fetchDoctors()
}

// 选择班次
const selectShift = async (shift) => {
  selectedShift.value = shift
  await fetchDoctors()
}

// 获取值班医生列表
const fetchDoctors = async () => {
  try {
    const token = localStorage.getItem('token')
    const headers = { Authorization: token }
    const response = await axios.get('http://127.0.0.1:8000/background/doctors-by-weekday/', {
      headers,
      params: {
        weekday: selectedDay.value,
        department_id: departmentId,
        shift: selectedShift.value
      }
    })
    doctors.value = response.data.results || []
  } catch (error) {
    showToast('获取医生列表失败')
  }
}

// 预约挂号
const makeAppointment = (doctor) => {
  router.push({
    path: '/appointment',
    query: {
      doctorId: doctor.id,
      doctorName: doctor.name,
      departmentName: departmentName.value,
      weekday: selectedDay.value
    }
  })
}

onMounted(() => {
  fetchDoctors()
})
</script>

<style scoped>
.choice-doctor {
  min-height: 100vh;
  background: #f6f7fb;
}

.date-selector {
  display: flex;
  padding: 15px;
  background: #fff;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
}

.date-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
}

.date-item.active {
  background: #338bff;
  color: #fff;
}

.day-label {
  font-size: 14px;
  margin-bottom: 4px;
}

.date-number {
  font-size: 16px;
  font-weight: bold;
}

.shift-selector {
  display: flex;
  padding: 10px 15px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.shift-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  margin: 0 10px;
  border-radius: 20px;
  background: #f5f5f5;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.shift-item.active {
  background: #338bff;
  color: #fff;
}

.doctor-list {
  padding: 15px;
}

.doctor-card {
  display: flex;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
}

.doctor-avatar {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.doctor-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.doctor-info {
  flex: 1;
}

.doctor-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.doctor-title {
  font-size: 14px;
  color: #666;
  margin-left: 8px;
  font-weight: normal;
}

.doctor-tags {
  margin-bottom: 8px;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  background: #f0f9ff;
  color: #338bff;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 8px;
}

.doctor-intro {
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doctor-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-left: 15px;
  min-width: 100px;  /* 确保有足够的空间显示预约信息 */
}

.price {
  color: #ff4d4f;
  font-size: 18px;
  margin-bottom: 8px;
}

.appointment-info {
  margin-bottom: 8px;
  text-align: right;
}

.appointment-count {
  font-size: 14px;
  color: #666;
}

:deep(.van-button--primary) {
  background: #338bff;
  border-color: #338bff;
}
</style>
